<template>
    <div>
        <van-cell-group>
            <van-cell title="设置电话"/>
            </van-cell-group>       
            <van-cell-group>
                <van-field v-model="telV" label="电话" :placeholder="uTel" />
                <van-field v-model="sms" center clearable label="短信验证码"
                placeholder="请输入短信验证码">
                <template #button>
                    <van-button size="small" type="primary" @click="sengru" style="width:86px" :disabled="isDis">
                        <div v-show="isShow">
                            <van-count-down
                            ref="countDown"
                            millisecond
                            :time="time"
                            :auto-start="false"
                            format="ss秒"
                            @finish="finish"
                            />
                        </div>
                        
                        {{myinfo}}
                    </van-button>
                </template>
                </van-field>
            </van-cell-group>       
            <van-cell-group>
                <van-cell style="width:150px;margin:auto">
                    <van-button round type="primary" block size="small" style="margin-bottom:10px" @click="confirom">确认</van-button>
                    <van-button round type="default" block size="small" @click="cancel">取消</van-button>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script scoped>
    export default {
        name:"tan2",
        data() {
            return {
                telV:"",
                sms:'',
                myinfo:'发送验证码',
                time: 60*1000,
                isShow:false,
                isDis: false
            }
        },
        props : [
            'userTel'
        ],
        methods: {
            confirom : function() {
                this.$emit("getTel",this.telV,false);
                this.telV = "";
                this.finish()
            },
            cancel : function() {
                this.$emit("quxiao1",false);
                this.$refs.countDown.reset();
                this.finish()
            },
            sengru : function(){
                this.myinfo = '';
                this.isDis = true
                this.isShow = true;
                this.$refs.countDown.start();
                // var sh;
                // sh=setInterval(()=>{
                //     this.time--;
                // },100);
            },
            finish() {
                // Toast('倒计时结束');
                this.isShow = false;
                this.myinfo = "发送验证码"
                this.isDis = false
                this.$refs.countDown.reset();
                
            }
        },
        computed: {
            uTel () {
                if(this.userTel == "未绑定") {
                    return "请输入姓名"
                } else {
                    return this.userTel
                }
            }
        },
    }
</script>

<style scoped>

</style>